<template>
	<view class="chargeMap">

		<!-- 搜索框 -->
		<view class="chargeMap-nav">
			<view class="chargeMap-leftcity">
				西安市
				<u-icon name="arrow-down-fill" size="15" class="cityicon"></u-icon>
			</view>
			<view class="chargeMap-search">
				<u-search border-color="#f66d1e" search-icon-color="#f66d1e" bg-color="#ffffff" placeholder="输入电站名称"
					:show-action="false" v-model="keyword"></u-search>
			</view>
			<view class="chargeMap-scan">
				<u-icon name="scan" size="50" color="#f66d1e"></u-icon>
			</view>
		</view>

		<!-- 地图 -->
		<map class="mapbox" @markertap="showcharge" :latitude="latitude" :longitude="longitude" :markers="covers"
			:polyline="polyline" :style="{'height': `calc(100vh - ${height}rpx - 130rpx)`}">
		</map>

		<!--白色悬浮内容部分-->
		<view class="whitecontent" :style="{'height':height+'rpx'}">


			<!-- 显示自己的和周围的充电桩 -->
			<view v-if="!isshowchargeitem">
				<!-- 切换展开或收起 -->
				<view style="text-align: center;">
					<view @tap="changeHeight" style="height: 40rpx;" v-if="!ischange">
						<image style="width: 40rpx;height: 40rpx;" src="../../static/images/lrx/button_chargeup@2x.png">
						</image>
					</view>
					<view @tap="changeHeight" style="height: 40rpx;line-height: 40rpx;" v-else>
						<image style="width: 40rpx;height: 4rpx;margin-bottom: 10rpx;"
							src="../../static/images/lrx/button_line@3x.png">
						</image>
					</view>
				</view>

				<!-- 收起时显示页面 -->
				<view v-show="!ischange" class="closebox">
					<scroll-view scroll-x="true" style="width: 680rpx;margin: 0 auto;">
						<view class="closebox-view">
							<view class="closebox-item">离我最近</view>
							<view class="closebox-item">对外开放</view>
							<view class="closebox-item">免费停车</view>
							<view class="closebox-item">空闲较多</view>
							<view class="closebox-item">空闲较少</view>
						</view>
					</scroll-view>
					<view class="" style="text-align: center;margin-top: 16rpx;">
						展开查看电站列表
					</view>
				</view>

				<!-- 展开时显示页面 -->
				<view v-show="ischange" class="openbox">
					<!-- 选择器 -->
					<u-dropdown active-color="#f5610c" ref="uDropdowns" @open="open" @close="close">
						<u-dropdown-item @change="changevalue1()" v-model="value1" :title="title1" :options="options1">
						</u-dropdown-item>
						<u-dropdown-item v-model="value2" title="附近"></u-dropdown-item>
						<u-dropdown-item v-model="value3" title="筛选" :options="options2"></u-dropdown-item>
					</u-dropdown>

					<!-- 下面显示内容 -->
					<scroll-view scroll-y="true" style="height: 400rpx;">
						<!-- 上拉显示详情 -->
						<view class="contentBox">
							<!-- 充电站详情 -->
							<view class="chargelist" v-for="item in renderData" :key="item.id">

								<!-- 左边充电桩标识 -->
								<navigator
									:url="`/pages/chargedetail/chargedetail?id=${item.id}&longitude=${longitude}&latitude=${latitude}`">
									<view class="leftdetail">
										<text class="leftTitle">
											{{item.shopName}}
										</text>
										<view class="biaoqian">
											<text class="biaoqianitem">免费停车</text>
											<text class="biaoqianitem">对外开放</text>
											<text class="biaoqianitem">休息室</text>
										</view>

										<view class="bottomitrm">
											<view class="bottomprice">
												￥<text
													class="bottompricered">{{item.price?item.price.toFixed(3):0.9500}}</text>元/度
											</view>
											<view class="bottomimages" style="display: flex;padding-top: 10rpx;">
												<view class=""
													style="border: 2rpx solid #f5610c;display: flex;margin-left: 20rpx;height: 40rpx;font-size: 24rpx;">
													<view class=""
														style="background-color: #f5610c;color:white;line-height: 40rpx;text-align: center;width: 40rpx;">
														直
													</view>
													<text
														style="font-size: 24rpx;line-height: 40rpx;width: 60rpx;text-align: center">{{item.chargeViews.length>0?item.chargeViews[0].dictionary.value:2}}/{{item.chargeViews.length>0?item.chargeViews[0].dictionary.status:4}}</text>
												</view>

												<view class=""
													style="border: 2rpx solid black;display: flex;margin-left: 20rpx;height: 40rpx;font-size: 24rpx;">
													<view class=""
														style="background-color: black;color:white;line-height: 40rpx;text-align: center;width: 40rpx;">
														交
													</view>
													<text
														style="font-size: 24rpx;line-height: 40rpx;width: 60rpx;text-align: center">{{item.chargeViews.length>0?item.chargeViews[1].dictionary.value:2}}/{{item.chargeViews.length>0?item.chargeViews[1].dictionary.status:4}}</text>
												</view>

											</view>
										</view>
									</view>

								</navigator>

								<!-- 右边图标 -->
								<view class="rightdetail">
									<image class="rightimg" @tap="GaoDedaohang(item.lat,item.lng)"
										src="../../static/images/lrx/icon_confirmednav@3x.png">
									</image>
									<text>{{item.distance?item.distance.value.toFixed(2):1.23}}km</text>
								</view>
							</view>

						</view>

					</scroll-view>

				</view>

			</view>

			<!-- 点击充电桩时显示的单个充电桩详情 -->
			<view v-else class="chargeItem">
				<!-- 充电站详情 -->
				<view class="chargelist" v-for="item in singlechargeDate" :key="item.id">

					<!-- 左边充电桩标识 -->
					<navigator
						:url="`/pages/chargedetail/chargedetail?id=${item.id}&longitude=${longitude}&latitude=${latitude}`">
						<view class="leftdetail">
							<text class="leftTitle">
								{{item.shopName}}
							</text>
							<view class="biaoqian">
								<text class="biaoqianitem">免费停车</text>
								<text class="biaoqianitem">对外开放</text>
								<text class="biaoqianitem">休息室</text>
							</view>

							<view class="bottomitrm">
								<view class="bottomprice">
									￥<text class="bottompricered">{{item.price?item.price.toFixed(3):0.9500}}</text>元/度
								</view>
								<view class="bottomimages" style="display: flex;padding-top: 10rpx;">
									<view class=""
										style="border: 2rpx solid #f5610c;display: flex;margin-left: 20rpx;height: 40rpx;font-size: 24rpx;">
										<view class=""
											style="background-color: #f5610c;color:white;line-height: 40rpx;text-align: center;width: 40rpx;">
											直
										</view>
										<text
											style="font-size: 24rpx;line-height: 40rpx;width: 60rpx;text-align: center">{{item.chargeViews.length>0?item.chargeViews[0].dictionary.value:2}}/{{item.chargeViews.length>0?item.chargeViews[0].dictionary.status:4}}</text>
									</view>

									<view class=""
										style="border: 2rpx solid black;display: flex;margin-left: 20rpx;height: 40rpx;font-size: 24rpx;">
										<view class=""
											style="background-color: black;color:white;line-height: 40rpx;text-align: center;width: 40rpx;">
											交
										</view>
										<text
											style="font-size: 24rpx;line-height: 40rpx;width: 60rpx;text-align: center">{{item.chargeViews.length>0?item.chargeViews[1].dictionary.value:2}}/{{item.chargeViews.length>0?item.chargeViews[1].dictionary.status:4}}</text>
									</view>

								</view>
							</view>
						</view>

					</navigator>

					<!-- 右边图标 -->
					<view class="rightdetail">
						<image class="rightimg" @tap="GaoDedaohang(singlechargeDate[0].lat,singlechargeDate[0].lng)"
							src="../../static/images/lrx/icon_confirmednav@3x.png">
						</image>
						<text>{{item.distance?item.distance.value.toFixed(2):1.23}}km</text>
					</view>
				</view>

			</view>


		</view>

	</view>

</template>


<script>
	import amap from "../../js_sdk/AMapWX_SDK_V1.2.1/amap-wx.js";
	var amapPluginInstance = new amap.AMapWX({
		key: "6cf68f60cc5802f6a4f6fb0ebbe7eb08" //该key 是在高德中申请的微信小程序key
	});
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions
	} = createNamespacedHelpers('carCharging')
	export default {
		data() {
			return {
				keyword: '',
				ischange: false,
				latitude: 39.909,
				longitude: 116.39742,
				title1: "综合",
				height: 180, // 悬浮白色内容高度
				isshowchargeitem: false, // 是否显示充电桩点
				renderData: [], //渲染数据
				singlechargeDate: [],
				//路线标记点
				polyline: [],
				//地图标记点
				covers: [{
					id: 11,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/images/lrx/charge@2x.png',
					width: '50rpx',
					height: "50rpx"
				}],

				// 筛选相关
				value1: 1,
				value2: 2,
				value3: 1,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '价格升序',
						value: 2,
					},
					{
						label: '价格降序',
						value: 3,
					}
				],
				options2: [{
						label: '条件1',
						value: 1,
					},
					{
						label: '条件2',
						value: 2,
					},
				],
			}
		},
		onLoad() {
			this.getCurrentPostion();
		},
		methods: {

			...mapActions(["getAroundchargeStation", "getPath"]),
			// 切换展开或收起时改变高度和显示内容
			changeHeight() {
				if (!this.ischange) {
					this.ischange = !this.ischange;
					this.height = 540;
				} else {
					this.ischange = !this.ischange;
					this.height = 180;
				}
			},
			// 筛选时的高亮打开和关闭
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdowns.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdowns.highlight(index);
			},
			changevalue1(index) {
				this.title1 = this.options1[index - 1].label;
			},
			// 点击是否显示当前充电桩
			showcharge(e) {
				//如果点击当前位置，则显示下拉菜单，点击其他位置显示其他电桩详情。
				if (e.detail.markerId == 0) {
					this.isshowchargeitem = false;
					this.changeHeight();
				} else {
					this.isshowchargeitem = true;
					this.height = 230;
					// 点击非当前充电桩时赋值给singlechargeDate,点击非当前点时显示单个充电桩详情
					this.singlechargeDate = this.renderData.filter(item => item.id == e.detail.markerId);
					this.getPaths();
				}
			},


			// 点击导航图片后开始导航
			GaoDedaohang(lat, lng) {
				uni.openLocation({
					latitude: lat,
					longitude: lng,
					success: function() {
						console.log('success');
					}
				});
			},

			// 高德地图获取两点之间的连线
			async getPaths() {
				let data = await this.getPath({
					longitude: this.longitude,
					latitude: this.latitude,
					Tlongitude: this.singlechargeDate[0].lng,
					Tlatitude: this.singlechargeDate[0].lat
				});

				let points = [];
				if (data.paths && data.paths[0] && data.paths[0].steps) {
					var steps = data.paths[0].steps;
					for (var i = 0; i < steps.length; i++) {
						var poLen = steps[i].polyline.split(';');
						for (var j = 0; j < poLen.length; j++) {
							points.push({
								longitude: parseFloat(poLen[j].split(',')[0]),
								latitude: parseFloat(poLen[j].split(',')[1])
							})
						}
					}
				}
				this.polyline = [{
					points: points,
					color: "#f5610c",
					width: 6
				}];
			},

			//高德地图获取当前位置
			getCurrentPostion() {
				amapPluginInstance.getRegeo({
					success: async (data) => {
						console.log("获取当前地址及经纬度", data);
						this.latitude = data[0].latitude;
						this.longitude = data[0].longitude;
						// 发经纬度请求给后端获取周边充电桩数据
						let filterData = await this.getAroundchargeStation({
							longitude: this.longitude,
							latitude: this.latitude
						});
						uni.setStorageSync("latitude", this.latitude); //保存经度纬度到本地
						uni.setStorageSync("longitude", this.longitude);
						// 筛选前10条数据为充电桩数据
						this.renderData = filterData.data.filter((item, index) => index <= 9)
						this.covers = this.renderData.map(item => {
							return ({
								id: item.id,
								latitude: item.lat,
								longitude: item.lng,
								title: item.shopName,
								iconPath: '../../static/images/lrx/charge@2x.png',
								width: '50rpx',
								height: "50rpx"
							})
						})
						this.covers.unshift({
							id: 0,
							latitude: this.latitude,
							longitude: this.longitude,
							title: "当前位置",
							iconPath: '../../static/images/lrx/charge@2x.png',
							width: '50rpx',
							height: "50rpx"
						})
					},
					fail: (info) => {
						//失败回调
						console.log("失败信息",info)
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.chargeMap {

		// 搜索框栏
		.chargeMap-nav {
			background-color: white;
			height: 90rpx;
			padding: 10rpx 40rpx;
			display: flex;
			justify-content: space-between;

			.chargeMap-leftcity {
				width: 130rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 32rpx;

				.cityicon {
					margin-bottom: 40rpx;
					margin-left: 6rpx;
				}
			}

			.chargeMap-search {
				width: 450rpx;
			}

			.chargeMap-scan {
				text-align: center;
				padding: 10rpx;
			}
		}

		// 地图
		.mapbox {
			width: 100%;
			overflow: hidden;
		}

		// 白色内容部分
		.whitecontent {
			width: 750rpx;
			background-color: white;
			overflow: hidden;
			transition: height 0.6s;

			// 收起内容时
			.closebox {
				height: 60rpx;

				.closebox-view {
					display: flex;

					.closebox-item {
						border: 1px solid #707070;
						font-size: 24rpx;
						color: #999999;
						border-radius: 20rpx;
						padding: 2rpx 20rpx;
						width: 140rpx;
						margin: 10rpx 16rpx;
						// 压缩因子，都不适应缩小，保持原宽度
						flex-shrink: 0;
					}
				}
			}

			// 展开内容时下面的充电桩
			.contentBox {
				color: #7b7b7b;
			}

			//单个充电桩详情
			.chargelist {
				border-bottom: 2rpx solid #dedede;
				height: 250rpx;
				display: flex;
				justify-content: space-between;

				.leftdetail {
					padding: 20rpx 30rpx 0rpx 30rpx;

					.leftTitle {
						font-size: 36rpx;
						color: #000;
					}

					.biaoqian {
						margin-top: 20rpx;
						margin-bottom: 20rpx;

						.biaoqianitem {
							width: 200rpx;
							height: 30rpx;
							background-color: #e8e8e8;
							border-radius: 10rpx;
							font-size: 24rpx;
							padding: 10rpx;
							margin-right: 20rpx;
						}

					}

					.bottomitrm {
						display: flex;
						padding: 10rpx;

						.bottomprice {
							color: gray;
							vertical-align: middle;

							.bottompricered {
								color: #e91111;
								font-size: 40rpx;
							}

						}

						.bottomimages {
							.imgitem {
								margin-top: 15rpx;
								margin-left: 20rpx;
								width: 80rpx;
								height: 40rpx;
							}
						}
					}
				}

				// 右边详情
				.rightdetail {
					width: 80rpx;
					text-align: center;
					margin-top: 90rpx;
					margin-right: 80rpx;

					.rightimg {
						width: 60rpx;
						height: 60rpx;
					}

				}

			}
		}

	}
</style>
